import React from 'react';
import { Layout } from 'antd';
import { connect } from 'dva';
import { withRouter } from 'dva/router';
import MyLayout from '../components/MyLayout/index';
import { config } from '../configs/constants';
import 'themes/index.less';


const { openPages } = config;

const { Content, Footer, Sider } = Layout;
const { Header, Bread } = MyLayout;

const App = ({
  location,
  children,
  dispatch,
  app
}) => {
  const { openKeys, user, bread, siderFoldN }= app;
  const siderProps = {
    openKeys,
    siderFoldN,
    changeOpenKeys(openKeys) {
      window.localStorage.setItem('openKeys', JSON.stringify(openKeys));
      dispatch({ type: 'layout/handleNavOpenKeys', payload: { openKeys } });
    }
  };
  const switchSider = () => dispatch({ type: 'layout/switchSider' });
  const headerProps = {
    user,
    collapsed: siderFoldN,
    switchSider,
    logout() {
      dispatch({ type: 'layout/logout' });
    }
  };

  const { pathname } = location;

  if (openPages && openPages.includes(pathname)) {
    return (<div>
      {children}
    </div>);
  }
  const breadProps = {
    ...bread
  };
  return (
    <div>
      <Layout>
        <Sider
          collapsible
          collapsed={siderFoldN}
          onCollapse={switchSider}
        >
          <MyLayout.Sider {...siderProps} />
        </Sider>
        <Layout id="mainContainer" style={{ marginLeft: !siderFoldN ? '200px' : '80px' }}>
          <Header {...headerProps} />
          <Content>
            <Bread {...breadProps} />
            { children }
          </Content>
          <Footer>
            {config.footerText}
          </Footer>
        </Layout>
      </Layout>
    </div>
  );
};


export default withRouter(connect(({ layout }) => ({ app: layout, loading: layout.loading }))(App));

